<template>
  <view class="cus-bar" :id="id">
    <!-- <view class="text">{{ curret }}</view> -->
    <up-tabbar
      :value="curret"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <up-tabbar-item
        v-for="(tab, tabIndex) in tabBarList"
        :key="tab.value"
        :text="tab.name"
        :id="`tab-item-${tabIndex}`"
        :badge="tab.badge"
        @tap="handleTabClick(tab.value)"
      >
        <template #active-icon>
          <image class="u-page__item__slot-icon" :src="tab.activeIcon" />
        </template>
        <template #inactive-icon>
          <image class="u-page__item__slot-icon" :src="tab.inactiveIcon" />
        </template>
      </up-tabbar-item>
    </up-tabbar>
  </view>
</template>
<script setup>
import { ref, defineProps, inject, watch } from "vue";
import { generateRandomNumId } from "@/utils/utils";
import { getUserMsgTotalApi } from "@/package_kuafu_apartment/pages/api/public";
import { onShow } from "@dcloudio/uni-app";
import { customNav } from "@/utils/customNav";
// 背景图片地址
const baseImgUrl = inject("baseImgUrl");
const props = defineProps({
  id: {
    type: Number,
    default: generateRandomNumId(19),
  },
  curTabValue: {
    type: Number,
  },
});
const curret = ref("");
const tabBarList = ref([
  {
    name: "首页",
    activeIcon: `${baseImgUrl}2024-04-22/1713755951192首页@2x.png`,
    inactiveIcon: `${baseImgUrl}2024-04-22/1713763604452首页@2x (1).png`,
    badge: 0,
    value: 0,
  },
  {
    name: "服务",
    activeIcon: `${baseImgUrl}2024-04-22/1713756186381kefu@2x.png`,
    inactiveIcon: `${baseImgUrl}2024-04-22/1713756248218服务@2x.png`,
    badge: 0,
    value: 1,
  },
  {
    name: "我的",
    activeIcon: `${baseImgUrl}2024-04-22/1713756326980我的-F@2x (1).png`,
    inactiveIcon: `${baseImgUrl}2024-04-22/1713756280771我的-F@2x.png`,
    badge: 0,
    value: 2,
  },
]);

watch(
  () => props.curTabValue,
  (newVal, oldVal) => {
    console.log("newVal",newVal);
    console.log("oldVal",oldVal);
    
    if (curret.value !== newVal) {
      curret.value = newVal;
    }
  },
  { deep: true, immediate: true }
);
const getUserMsgTotal = async () => {
  const res = await getUserMsgTotalApi();
  const { code, data } = res;
  if (code === 200) {
    tabBarList.value.find((tab) => tab.name === "我的").badge = data;
  }
};

const packageKuaFuPath = inject("packageKuaFuPath");
/**
 * 监听tab点击事件
 * @param tabValue
 */
const handleTabClick = (tabValue) => {
  if (curret.value !== tabValue) {
    console.log("curret.value", curret.value);
    console.log("tabValue", tabValue);
    // curret.value = tabValue;
    switch (tabValue) {
      case 0:
        customNav(`${packageKuaFuPath}/home/index`);
        break;
      case 1:
        customNav(`${packageKuaFuPath}/customer/index`);
        break;
      case 2:
        customNav(`${packageKuaFuPath}/my/index`);
        break;

      default:
        break;
    }
  }
};

onShow(() => {
  getUserMsgTotal();
});
</script>
<style lang="less">
@import "style/c-b-b";
</style>
